<template>
	<view class="order_main">
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 状态-->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"
				:scroll-with-animation="true">
				<view class="" style="display: flex;justify-content: space-around;">
					<view class="menu-topic-view" v-for="(item,index) in tabsList" :id="'tabNum'+(index+1)" :key="index"
						@click="swichMenu(index)">
						<view :class="currentTab==index? 'menu-topic-act' : ''">
							<text class="menu-topic-text">{{item.name}}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 内容 -->
			<swiper class="swiper-box-list" :current="currentTab" :disable-touch="true">
				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view class="scroll-view_list" scroll-y="true">
							<view class="pag_bottom">
								<view class="item_box" @click="showCode">
									<view class="item_box_left">
										<uni-icons type="scan" size="40" color="#007cff"
											style="background-color: #f2f9ff;border-radius: 4rpx;padding: 20rpx;"></uni-icons>
										<view class="item_text_box">
											<view class="title">
												扫条码查询
											</view>
											<view class="tip">
												如何找到机身条码
											</view>
											<view class="l_tip" @click.stop="showTip">
												查看示例
											</view>
										</view>
									</view>
									<uni-icons type="arrow-right" size="30" color="#007cff"></uni-icons>
								</view>
								<view class="item_box" @click="goStandard">
									<view class="item_box_left">
										<uni-icons type="search" size="40" color="#007cff"
											style="background-color: #f2f9ff;border-radius: 4rpx;padding: 20rpx;"></uni-icons>
										<view class="item_text_box">
											<view class="title">
												按分类查询
											</view>
											<view class="tip">
												点击选择商品分类
											</view>
										</view>
									</view>
									<uni-icons type="arrow-right" size="30" color="#007cff"></uni-icons>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
				<!-- 		<swiper-item class="swiper-topic-list" key="ttt">
					<view class="scroll_content">
						<scroll-view class="scroll-view_list" scroll-y="true">
							<view class="pag_bottom">
								服务政策
							</view>
						</scroll-view>
					</view>
				</swiper-item> -->
				<!-- 				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view class="scroll-view_list" scroll-y="true">
							<view class="pag_bottom">
								产品配件
							</view>
						</scroll-view>
					</view>
				</swiper-item> -->
				<swiper-item class="swiper-topic-list">
					<view class="scroll_content">
						<scroll-view class="scroll-view_list" scroll-y="true" :disable-touch="false">
							<view class="pag_bottom">
								<view class="tag_box">
									<view class="title_bar">
										<view class="title_bar_item" :class="{'title_bar_item_active':queryType==index}"
											@click="changeBarItem(index)" v-for="(item,index) in tagList" :key="index">
											<view class="tab">
												<view class="tab-inner"
													:class="queryType==index?'':queryType==0&&index==1?`tab-inner01`:queryType==1&&index==0?`tab-inner0012`:queryType==1&&index==2?`tab-inner0122`:queryType==2&&index==1?`tab-inner12`:''">
													{{item.name}}
												</view>
											</view>
										</view>
									</view>
									<view class="" v-if="queryType==0">
										<view class="tab_content">
											<view class="tab_label">
												<span class="star">*</span>机身条码
											</view>
											<view class="tab_tip" style="column-gap: 12rpx;">
												<uni-easyinput maxlength="20" primaryColor="rgb(192, 196, 204)"
													clearable :inputBorder="false" :trim="true" placeholder="请输入机身条码"
													placeholderStyle="font-size:28rpx;text-align: right;"
													@input="nextTick(()=>scanVal=scanVal.replace(/[\u4e00-\u9fa5]/g, ''))"
													v-model="scanVal"></uni-easyinput>
												<!-- <span>请选择机身条码</span> <uni-icons color="#aaa" type="right"></uni-icons> -->
												<uni-icons color="#aaa" size="20" @click="scanClick"
													type="scan"></uni-icons>
												<view class="" style="color: #007cff;" @click="inputSearch()">
													搜索
												</view>
											</view>
										</view>
									</view>
									<view class="" v-if="queryType==1">
										<view class="tab_content">
											<view class="tab_label">
												<span class="star">*</span>商品分类
											</view>
											<view class="tab_tip" @click="selectPolicy(queryType)">
												<span v-if="!goodsTypeVal">请选择商品分类</span>
												<span v-else class="item-val">{{goodsTypeVal}}</span>
												<uni-icons color="#aaa" type="right"></uni-icons>
											</view>
										</view>
									</view>
									<view class="" v-if="queryType==2">
										<view class="tab_content">
											<view class="tab_label">
												<span class="star">*</span>商品型号
											</view>
											<view class="tab_tip" @click="selectPolicy(queryType)">
												<span v-if="!goodsTypeVal">请选择商品型号</span>
												<span v-else class="item-val">{{goodsTypeVal}}</span>
												<uni-icons color="#aaa" type="right"></uni-icons>
											</view>
										</view>
									</view>
									<view class="search_result" v-if="policyList.length>0">
										<view class="label_header">
											<view class="text_tip">
												查询结果
											</view>
											<!-- <view class="bar_item" @click="showpopup=true">
												什么情况不保修?
											</view> -->
										</view>
										<view class="conent_box">
											<view class="conent_box_item" v-for="(item,index) in policyList"
												:key="index">
												<view class="title_bar">
													<view class="goods_type">
														{{item.name}}
													</view>
													<view class="text_descr" v-if="item.descr">
														{{item.descr}}
													</view>
												</view>
												<view class="text_explain" v-if="item.content">
													<view class="text_content">
														{{item.content}}
													</view>
												</view>
											</view>
										</view>
									</view>

								</view>
								<view class="is_policyList" v-if="is_policyList">
									<uni-icons type="search"
										color="#ccc"></uni-icons>{{queryType==0?'该条码暂无保修政策':queryType==1?'该分类暂无保修政策':'该型号暂无保修政策'}}
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="add_main">
				<p class="text_top_popup">费用标准查询<uni-icons class="icon" color="#aaa" @click="popup.close()" size="20"
						type="closeempty"></uni-icons></p>
				<uni-easyinput suffixIcon="scan" placeholderStyle="font-size:28rpx;" :trim="true" v-model="code"
				@input="nextTick(()=>code=code.replace(/[\u4e00-\u9fa5]/g, ''))"
					placeholder="请输入条码" @iconClick="iconClick"></uni-easyinput>
				<button class="onlogout" @click="addCode"><span>确定</span></button>
			</view>
		</uni-popup>
		<!-- 什么情况不保修？ -->
		<common-tip @set-popup="showpopup=$event" :showpopup="showpopup"></common-tip>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import { onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import _ from "lodash";
	import apiCode from '@/util/api/code.js'
	import CommonTip from '@/components/CommonTip'
	const tabsList = ref([
		{ status: 1, name: '收费标准' },
		{ status: 2, name: '保修政策' },
		// { status: 3, name: '产品配件' },
		// { status: 4, name: '服务标准' },
	])
	const tagList = ref([
		{ status: 1, name: '按条码查' },
		{ status: 2, name: '按分类查' },
		{ status: 3, name: '按型号查' }
	])
	const showpopup = ref(false)
	const goodsTypeVal = ref('')
	const currentTab = ref(0)//当前标题index
	const tabCurrent = ref('tabNum0')
	const scanVal = ref('')//按条码查
	const policyList = ref([])//保修列表
	const is_policyList = ref(false)//查询结果
	// Tab切换内容
	async function swichMenu(index : number) {
		currentTab.value = index
		tabCurrent.value = 'tabNum' + index
	}
	const showTip = () => {
		uni.showModal({
			title: '在哪里查条码/型号',
			showCancel: false,
			confirmText: '确认',
			confirmColor: '#007cff',
			content: '网购订单，产品外包装，产品铭牌、表面或底部，产品说明书等位置'
		})
	}
	const popup = ref()
	const code = ref('')
	const showCode = () => {
		code.value = ''
		popup.value.open()
	}
	// 条码查保修
	const scanClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				scanVal.value = res.result
				inputSearch()
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000
				})
				// #endif
			}
		})
	}
	// 查询类型
	const queryType = ref(0)
	// 切换查询
	const changeBarItem = (index) => {
		queryType.value = index
		goodsTypeVal.value = ''
		policyList.value = []
		is_policyList.value = false
		uni.removeStorageSync('IS_GOODS_TYPE_KEY')
	}
	const addCode = _.debounce(() => {
		if (!code.value.trim()) {
			uni.showToast({
				title: '请先输入条码！',
				icon: 'none'
			})
			return
		}
		uni.showLoading({
			title: "加载中...",
			mask: true
		})
		apiCode.getGoodsTypeBySNCode(code.value).then(res => {
			uni.hideLoading()
			if (res.code == 20000) {
				if (res.data.row.length > 0) {
					uni.navigateTo({
						url: '/pages_user/fee/standard?id=' + res.data.row[0].id
					})
					popup.value.close()
				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#007cff',
						content: '该商品暂无收费标准！'
					})
				}
			}
		})
	}, 800)
	// 调起客户端扫码界面，扫码成功后返回对应的结果。
	const iconClick = () => {
		uni.scanCode({
			scanType: ['qrCode', 'barCode'],//扫码类型
			success: async function (res) {
				code.value = res.result
				addCode()
			},
			fail: (err) => {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '设备不支持此功能',
					duration: 3000
				})
				// #endif
			}
		})
	}
	// 按条码查
	const inputSearch = _.debounce(() => {
		if (scanVal.value.trim()) {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			apiCode.getMobileWarrantyPolicyBySnCode({ snCode: scanVal.value.trim() }).then(res => {
				uni.hideLoading()
				if (res.code == 20000) {
					policyList.value = res.data.rows
				}
				is_policyList.value = policyList.value.length == 0
			})
		}
	}, 800)
	const goStandard = () => {
		uni.navigateTo({
			url: '/pages_user/fee/standard'
		})
	}

	const selectPolicy = (val) => {
		switch (val) {
			case 1:
				var pages = getCurrentPages();
				var pageIndex = pages.slice().reverse().findIndex(o => o.route == 'pages_user/fee/goodstype');
				if (pageIndex == -1) {
					uni.navigateTo({
						url: '/pages_user/fee/goodstype'
					})
				} else {
					uni.navigateBack({ delta: pageIndex })
				}
				break;
			case 2:
				var pages = getCurrentPages();
				var pageIndex = pages.slice().reverse().findIndex(o => o.route == 'pages_user/fee/marque');
				if (pageIndex == -1) {
					uni.navigateTo({
						url: '/pages_user/fee/marque'
					})
				} else {
					uni.navigateBack({ delta: pageIndex })
				}
				break;
			default:
				break;
		}
	}
	onLoad(async (e) => {
		if (e.policy) {
			swichMenu(Number(e.policy))
		}
		if (e.queryType) {
			queryType.value = Number(e.queryType)
			let id = uni.getStorageSync('IS_GOODS_TYPE_KEY')?.id

			if (e.queryType == 1 && id) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				apiCode.getWarrantyPolicy(id).then(res => {
					uni.hideLoading()
					if (res.code == 20000) {
						policyList.value = res.data.rows
					}
					is_policyList.value = policyList.value.length == 0
				})
			} else if (e.queryType == 2 && id) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				apiCode.getMobileWarrantyPolicyByGoodsId(id).then(res => {
					uni.hideLoading()
					if (res.code == 20000) {
						policyList.value = res.data.rows
					}
					is_policyList.value = policyList.value.length == 0
				})
			}
		}
	})
	onUnload(() => {
		uni.hideLoading()
	})

	onShow(async () => {
		goodsTypeVal.value = uni.getStorageSync('IS_GOODS_TYPE_KEY')?.name || ''
	})
</script>

<style lang="scss" scoped>
	.order_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100vw;
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		$size: 10rpx;
		$size1: 20rpx;

		.add_main {
			background-color: #fff;
			border-radius: 10rpx;
			width: 80vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				position: relative;

				.icon {
					position: absolute;
					right: 0rpx;
					font-weight: 500;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 0;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				margin-top: 20rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx
			}
		}

		:deep(.uni-searchbar__cancel) {
			color: #FFFFFF;
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			position: relative;

			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
				display: none;
			}

			.top-menu-view {
				display: flex;
				white-space: nowrap;
				width: 100%;
				background-color: #FFFFFF;
				height: 86rpx;
				line-height: 86rpx;
				border-bottom: 1rpx solid #d8dbe6;

				.menu-topic-view {
					display: inline-block;
					white-space: nowrap;
					height: 86rpx;
					position: relative;
					padding: 0rpx 10rpx;

					.menu-topic-text {
						font-size: 28rpx;
						color: #303133;
						margin: 0 20rpx;
						position: relative;
						z-index: 2;
						font-weight: bold;
						height: calc(100% - 4rpx);
					}

					.menu-topic-bottom {
						position: absolute;
						bottom: 4rpx;
						left: 0;
						right: 0;
						// margin: 0 40rpx;
						padding: 0rpx 10rpx;

						.menu-topic-bottom-color {
							width: 100%;
							height: 4rpx;
						}
					}

					.menu-topic-act {
						.menu-topic-text {
							color: #007cff;
						}

						.menu-topic-bottom {
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom-color {
							background: #007cff;
						}
					}
				}
			}



			.swiper-box-list {
				width: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;

				.swiper-topic-list {
					width: 100%;
					flex: 1;

					.scroll_content {
						height: 100%;
						box-sizing: border-box;

						.scroll-view_list {
							height: 100%;

							.tag_box {
								filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));

								.title_bar {
									display: flex;
									justify-content: space-evenly;

									.title_bar_item {
										flex: 1;

										.tab {
											padding-top: 12rpx;

											.tab-inner {
												background-color: #e9edf5;
												padding: 22rpx;
												color: #777;
												display: flex;
												justify-content: center;
												align-items: center;
												position: relative;

												&:after {
													content: '';
													width: 100%;
													height: 100%;
													position: absolute;
													background-color: #fff;
													z-index: -1;
												}
											}
										}

										&:nth-child(1) {
											.tab-inner {
												border-radius: $size 0 0 0;
											}
										}

										&:nth-child(3) {
											.tab-inner {
												border-radius: 0 $size 0 0;
											}
										}

										.tab-inner01 {
											border-bottom-left-radius: $size1;
										}

										.tab-inner0012 {
											border-bottom-right-radius: $size1 !important;
										}

										.tab-inner0122 {
											border-bottom-left-radius: $size1 !important;
										}

										.tab-inner12 {
											border-bottom-right-radius: $size1;
										}

									}

									.title_bar_item_active {
										border-top-left-radius: $size1;
										border-top-right-radius: $size1;

										.tab {
											background-color: #FFFFFF;
											border-top-left-radius: $size1;
											border-top-right-radius: $size1;

											.tab-inner {
												color: #007cff;
												background-color: #ffffff;
											}
										}
									}
								}

								.tab_content {
									background-color: #ffffff;
									display: flex;
									justify-content: space-between;
									padding: 4rpx 24rpx;
									height: 90rpx;
									border-radius: 0 0 $size $size;
									column-gap: 48rpx;
									border-top: 1px solid rgba(0, 0, 0, 0.05);

									.tab_label {
										display: flex;
										align-items: center;
										column-gap: 6rpx;

										.star {
											font-weight: bold;
											color: #dd542d;
										}
									}

									.tab_tip {
										display: flex;
										align-items: center;
										justify-content: flex-end;
										color: #aaa;
										// column-gap: 12rpx;
										flex: 1;
										overflow: hidden;

										:deep(.uni-input-input) {
											text-align: right;
										}

										.item-val {
											text-align: right;
											color: #000;
											text-overflow: ellipsis;
											white-space: nowrap;
											overflow: hidden;
											flex: 1;
										}
									}
								}

								.search_result {
									padding: 24rpx 0;
									display: flex;
									flex-direction: column;
									row-gap: 24rpx;
									margin-top: 10rpx;

									.label_header {
										display: flex;
										justify-content: space-between;
										align-items: center;

										.bar_item {
											font-size: 24rpx;
											color: #007cff;
										}

										.text_tip {
											position: relative;
											padding-left: 24rpx;

											&::after {
												content: '';
												position: absolute;
												width: 8rpx;
												height: 24rpx;
												border: 2rpx;
												background-color: #007cff;
												top: calc(50% - 12rpx);
												left: 0;
											}
										}
									}

									.conent_box {
										display: flex;
										flex-direction: column;
										row-gap: 34rpx;
										padding: 24rpx;
										background-color: #ffffff;
										border-radius: $size;

										.conent_box_item {
											display: flex;
											flex-direction: column;
											row-gap: 20rpx;

											.title_bar {
												flex: 1;
												display: flex;
												justify-content: flex-start;
												column-gap: 24rpx;

												align-items: center;

												.goods_type {
													font-size: 28rpx;
													color: #007cff;
													flex: none;
												}

												.text_descr {
													flex: initial;
													background-color: #f2f9ff;
													color: #007cff;
													padding: 8rpx 12rpx;
													border-radius: 4rpx;
													font-size: 22rpx;
													display: -webkit-box;
													-webkit-line-clamp: 2;
													-webkit-box-orient: vertical;
													overflow: hidden;
													word-wrap: break-word;
													word-break: break-all;
												}
											}


											.text_explain {
												display: flex;
												flex-direction: column;
												row-gap: 12rpx;
												background-color: #f2f6fc;
												padding: 24rpx;
												border-radius: $size;



												.text_content {
													color: #666;
													word-wrap: break-word;
													word-break: break-all;
													white-space: pre-wrap;
													font-size: 24rpx;
													text-align: justify;
													/* 两端对齐，自动调整字符间距以填满行宽 */
												}
											}
										}
									}
								}
							}

							.pag_bottom {
								font-size: 28rpx;
								padding: 24rpx 30rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								row-gap: 30rpx;

								.is_policyList {
									display: flex;
									justify-content: center;
									align-items: center;
									height: 20vh;
									color: #ccc;
									font-size: 28rpx;
									column-gap: 6rpx;
								}

								.item_box {
									display: flex;
									align-items: center;
									justify-content: space-between;
									background-color: #fff;
									padding: 30rpx;
									box-sizing: border-box;
									filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));

									.item_box_left {
										display: flex;
										align-items: center;
										column-gap: 24rpx;

										.item_text_box {
											display: flex;
											flex-direction: column;
											row-gap: 10rpx;

											.title {
												font-weight: bold;
												font-size: 28rpx;
											}

											.tip {
												color: #777;
												font-size: 22rpx;
											}

											.l_tip {
												text-decoration: underline;
												color: #007cff;
												font-size: 22rpx;
												display: flex;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>